<template>
  <div class="games">
    <div class="kinds-line"></div>
    <div class="sort-wrap">
      <div class="time" @click='sortGame(1)'>
        <span>比赛时间</span>
        <div :class='{ordered: this.order === 1}'><i class="iconfont icon-xiangxia"></i></div>
      </div>
      <div class="award" @click='sortGame(3)'>
        <span>奖励</span>
        <span :class='{ordered: this.order === 3}'><i class="iconfont icon-xiangxia"></i></span>
      </div>
      <div class="players" @click='sortGame(2)'>
        <span>参赛人数</span>
        <span :class='{ordered: this.order === 2}'><i class="iconfont icon-xiangxia"></i></span>
      </div>
    </div>
    <load-more :top-method='refresh' :bottom-method='loadMoreData' ref='loadMore'>
      <div class="list">
        <div v-for='game in games' :key='game.GAME_ID' v-if='game.GAME_STEP != "5"' @click='gotoDetail(game)'>
          <div v-if='isOldGame(game)'>
            <game-item :game='game'></game-item>
            <div class="divide"></div>
          </div>
          <game-item-v2 :game='game' v-else></game-item-v2>
        </div>
      </div>
      <div v-if='requestError' @click='resetGames()' class="requestError">出错啦~点击重试</div>
    </load-more>
  </div>
</template>

<style lang='less' rel="stylesheet/less" scoped>
.games{
  padding-bottom: 44px;
  background: #fff;
 .kinds-line{
    width: 100%;
    height: 1pt;
    background-color: #A2E1FC;
  }
  .sort-wrap{
    display: flex;
    text-align: center;
    color: #999;
    font-size: 1.3rem;
    .time,.award,.players{
      flex:1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px 0;
    }
    .ordered{
      transform: rotate(180deg);
      color: #78D4FF;
    }
  }
  .pageNum{
    position: fixed;
    bottom: 150px;
    color: red;
    font-size: 30px;
  }
  .divide{
    border-bottom: dashed 1px #a1a1a1;
    margin: 0 8%;
  }
  .requestError{
    text-align: center;
    padding: 5px;
  }
}

</style>

<script>
  import GameItem from 'components/game/gamelist/GameItem'
  import GameItemV2 from 'components/game/gamelist/GameItemV2'
  import RemoteDAO from 'common/remoteDAO'
  import LoadMore from 'components/LoadMore'
  import {openGame} from 'components/game/openGame'
  export default {
    components:{GameItem, GameItemV2, LoadMore},
    data(){
      return {
        games:[],
        reqParams: {
          gameStatus: '1',//审核通过的
          pageSize: 10,
          pageNum: 1
        },
        requestError: false,
        gameOrdered:{
          date: false,//game date ordered
          award: false,
          players: false
        },
        order: -1 //1:开始时间正序 2:加入人数正序 3:资金池正序 (取负值时为逆序)
      }
    },
    watch: {
      order: function (val) {
        console.info('order')
        this.refresh()
      }
    },
    mounted(){
      // this.getGamesP();
    },
    methods:{
      isOldGame (game) {
        if (game.JOIN_BEGIN_DATE === '' || game.JOIN_BEGIN_DATE === '0' || !game.JOIN_BEGIN_DATE) return false
        return true
      },
      refresh(){
        this.getGamesP(true);
      },
      loadMoreData(){
        this.getGamesP(false);
      },
      /**
       * 跳转到比赛详情
       * @param  {Object} game 比赛
       */
      gotoDetail(game){
        // this.$router.push({path: '/game/gamedetail',query:{gameId:gameId}});
          // this.$store.dispatch('setTip',{text:game.END_DATE + '   END_DATE'});
        openGame(game, this);
      },
      resetGames(){
        this.requestError = false;
        this.$refs.loadMore.reset();
      },
      /**
       * 给比赛排序
       * @param  {number} type 排序的种类
       */
      sortGame(type){
        switch(type){
          case 1://game start date
            if(this.gameOrdered.date){
              this.gameOrdered.date = false;
              this.order = -1
            }else{
              this.gameOrdered.date = true;
              this.order = 1
            }
            break;
          case 3://award
            if(this.gameOrdered.award){
              this.gameOrdered.award = false;
              this.order = -3
            }else{
              this.gameOrdered.award = true;
              this.order = 3
            }
            break;
          case 2://players
            if(this.gameOrdered.players){
                this.gameOrdered.players = false;
                this.order = -2
              }else{
                this.gameOrdered.players = true;
                this.order = 2
              }
            break;
        }
      },
      /**
       * 获取个人PK比赛列表
       * @param  {[boolean]} refresh [是否刷新]
       */
      getGamesP (refresh) {
        // body...
        if (refresh) {
          this.reqParams.pageNum = 1;
          this.$refs.loadMore.reset()
        }
        let param = {
          userCode: '0',
          gameId: '',
          gameStatus: this.reqParams.gameStatus,
          gameKind: '',
          gameType: 'NETDS',
          pageSize: this.reqParams.pageSize,
          pageNum: this.reqParams.pageNum,
          order: this.order
        }
        RemoteDAO.callUC12008302(param, response =>{
          if(response.error == '1'){
            this.$store.dispatch('setTip', {text: response.data});
            if(this.games.length == 0) this.requestError = true;//仅当games列表中没有比赛时才显示这个错误
            this.$refs.loadMore.onBottomError();
            return;
          }else {//request success
            this.requestError = false;
            if(response.data == undefined || response.data == null || response.data.body.length < this.reqParams.pageSize) {//数据加载完
              if(response.data.body.length == 0 && this.games.length == 0){//请求返回的数据为空，并且games列表中的数据也为空
                this.requestError = true;
                this.$refs.loadMore.onBottomError();
              }else{
                this.games = this.games.concat(response.data.body);
                this.$refs.loadMore.onBottomAllLoaded();
              }
            }else{//get games
              if (refresh) {
                this.games = response.data.body;
                this.$refs.loadMore.onTopLoaded();
              }else {
                this.games = this.games.concat(response.data.body);
                this.$refs.loadMore.onBottomLoaded();
              }
            }
            this.reqParams.pageNum += 1;
          }
        });
      }
    }
  }
</script>
